<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <div v-show="showForm == 2">
                <div class="container" style="margin-top:20px">
                    <h3 style="margin-bottom: 20px">预览召回</h3>
                    <el-row>
                        <el-col :span="12">
                            <!-- <el-form-item label="召回类型：">
                                {{ruleForm.inType}}
                            </el-form-item> -->
                            <el-form-item label="召回范围：">
                                {{ruleForm.link}}
                            </el-form-item>
                            <el-form-item label="召回日期：">
                                {{ruleForm.time}}
                            </el-form-item>
                            <el-form-item label="召回人：">
                                {{ruleForm.recallUser}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="批号：">
                                {{ruleForm.batch}}
                            </el-form-item>
                            <el-form-item label="品名：">
                                {{ruleForm.breedName}}
                            </el-form-item>
                            <el-form-item label="操作人：">
                                {{ruleForm.userName}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="召回原因：">
                                <div v-html="ruleForm.reason"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item class="footerFixed">
                    <el-button type="primary" @click="submitForm">确认无误</el-button>
                    <el-button @click="showForm = 1">返回修改</el-button>
                </el-form-item>
            </div>
            <div v-show="showForm == 1">
                <div class="container" style="margin-top:20px">
                    <h3 style="margin-bottom: 20px">设置召回</h3>
                    <el-row>
                        <el-col :span="12">
                            <!-- <el-form-item label="召回类型：" prop="type">
                                <el-radio-group v-model="ruleForm.type" @change="changeMaterType">
                                    <el-radio label="追溯码召回" border>追溯码召回</el-radio>
                                    <el-radio label="非追溯码召回" border>非追溯码召回</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                            <el-form-item label="召回范围：" prop="link">
                                <el-select v-model="ruleForm.link" value-key="id" @change="handleLink" filterable placeholder="请选择" style="width:300px">
                                    <el-option label="原料入库" value="原料入库"></el-option>
                                    <el-option label="生产入库" value="生产入库"></el-option>
                                    <el-option label="包装入库" value="包装入库"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="召回日期：" prop="time">
                                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.time" style="width: 300px;"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="召回人：">
                                <el-input placeholder="请输入内容" v-model.trim="ruleForm.recallUser" style="width:300px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- <el-form-item label="追溯码：" prop="code">
                                <el-input placeholder="请输入内容" v-model="ruleForm.code" style="width:300px"></el-input>
                            </el-form-item> -->
                            <el-form-item label="批号：" prop="batch">
                                <el-select v-model="ruleForm.batch" value-key="batch" @change="changeBatch" filterable placeholder="请选择" style="width:300px">
                                    <el-option
                                        v-for="item in batchList"
                                        :key="item.batch"
                                        :label="item.batch"
                                        :value="item"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="品名：">
                                {{ruleForm.breedName}}
                            </el-form-item>
                            <el-form-item label="操作人：">
                                {{ruleForm.userName}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="召回原因：">
                                <div ref="editor" style="width:90%"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item class="footerFixed">
                    <el-button type="primary" @click="submitRules('ruleForm')">提交</el-button>
                    <el-button @click="backPage">返回</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import E from 'wangeditor';
import {warehouse_findByType,recall_save} from "@/request/api";
    export default {
        data() {
            return {
                showForm: 1,
                disabled: true,
                batchList: [],
                ruleForm: {
                    type: '非追溯码召回',
                    link: '',
                    time: '',
                    recallUser: '',
                    batch: '',
                    breedName: '',
                    userName: '',
                    reason: ''
                },
                rules:{
                    link: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    batch: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    time: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                },
            };
        },
        mounted(){
            this.init()
            this.id = this.$route.query.id
            this.ruleForm.userName = localStorage.getItem('ms_username')
            this.ruleForm.userId = localStorage.getItem('userid')
        },
        methods: {
            backPage () {
                this.$router.go(-1);
            },
            // 根据召回范围查找批次
            handleLink(val) {
                var link = ''
                if (val == '原料入库') {
                    link = '原料'
                } else if (val == '生产入库') {
                    link = '生产'
                } else if(val == '包装入库') {
                    link = '包装'
                }
                warehouse_findByType({
                    link: link
                }).then((res)=>{
                    this.batchList = res.data
                })
            },
            // 根据批次查找品名
            changeBatch(val) {
                this.ruleForm.breedName = val.breedName
                this.ruleForm.batch = val.batch
                // console.log(this.ruleForm.batch)
            },
            // 调用接口
            init(){
                var editor = new E(this.$refs.editor)
                editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
                editor.customConfig.uploadFileName = 'file';
                editor.customConfig.uploadImgHooks = {
                    customInsert: function (insertImg, result, editor) {
                        var url =  "http://" + window.location.host + "/file/show/" +  result.data
                        insertImg(url)
                    }
                }
                editor.customConfig.onchange = (html) => {
                    this.ruleForm.reason = html
                }
                editor.create();
                editor.txt.html(this.ruleForm.reason)
            },
            submitRules(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 生产场景
                        this.showForm = 2
                        // console.log(this.ruleForm,3233)
                    } else {
                        return false;
                    }
                })
            },
            // 提交召回
            submitForm() {
                recall_save(this.ruleForm).then((res) => {
                    if (res.code == 200) {
                        this.$notify({
                            title: '提示',
                            message: '添加成功',
                            type: 'success',
                            duration:1000
                        });
                        this.backPage()
                    }
                })
            },
        }
    }
</script>

<style scoped>
.el-pagination{
    text-align: center;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>